<script setup lang="ts">
import {defineProps, ref} from "vue"
import headerTemplate from "../visualization/headerTemplate.vue"
import dateComponent from "../visualization/dateComponent.vue"
import * as echarts from 'echarts';
import chinaConfig from '@/assets/china.js'
import {
  getUserDataList,
  getUserMapDataList, userActiveStatistics,
  userDataStatistics,
  userLoginStatistics
} from "@/pages/visualization/index.js";
const startTime = ref('2025')
const endTime = ref('2025')
const type=ref('year')
const handleClick = (date, dateType) => {
  type.value = dateType;
  if (dateType !== 'year'){
    startTime.value =date[0];
    endTime.value = date[1];
  }else {
    startTime.value = date;
  }
  getUserData();
  getUserMapData();
  getUserActiveData()
  getUserStatisticsData();
  getUserLoginStatisticsData();
}
echarts.registerMap('china', chinaConfig);
const init1 = () => {
  const chartDom = document.getElementById("main");
  if (chartDom) {
    const myChart = echarts.init(chartDom);
    // 配置图表
    myChart.setOption(
      {
        tooltip: {
          triggerOn: "mousemove|click",
          axisPointer: {
            type: "line"
          },
          formatter: function (e, t, n) {
            return '.5' == e.value ? e.name + "：有疑似病例" : e.name + "<br />" + e.seriesName + "：" + e.value
          }
        },
        visualMap: {
          min: 0,
          max: 10000,
          left: 26,
          bottom: 40,
          showLabel: true,
          text: ["高", "低"],
          textStyle: {
            color: "#BEDAEE"
          },
          pieces: [{
            gt: 1000,
            label: "> 1000人",
            color: "#7f1100"
          }, {
            gte: 100,
            lte: 1000,
            label: "100 - 1000人",
            color: "#ff5428"
          }, {
            gte: 10,
            lt: 100,
            label: "10 - 100人",
            color: "#ff8c71"
          }, {
            gte: 1,
            lt: 10,
            label: "1 - 10人",
            color: "#ffd768"
          }, {
            gte: 0,
            lt: 1,
            label: "0 - 1人",
            color: "#BEDAEE"
          }],
          show: true
        },
        geo: {
          map: 'china',
          roam: true,
          scaleLimit: {
            min: 1,
            max: 2
          },
          zoom: 1.13,
          top: 50,
          label: {
            show: true,
            fontSize: "14",
            color: "#fff"
          },
          itemStyle: {
            borderColor: "rgba(0, 0, 0, 0.2)"
          },
          emphasis: {
            areaColor: "#f2d5ad",
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            borderWidth: 0
          }
        },
        series: [{
          name: "用户数量",
          type: "map",
          geoIndex: 0,
          data:userMapData.value
        }]
      }
    );
    return myChart;
  } else {
    console.error("DOM 元素未渲染: #main");
  }
}
const userPin = ()=>{
  var dataList = userStatistics.value;
  var nameList = ["管理员", "教师", "学生"];
  var colorList = ["#7b55d8", "#366ccc", "#46b1ce"];
  var lengthList = [];
  nameList.forEach(function (item) {
    lengthList.push({ "name": (item).toString(), "icon": "circle" });
  });
  var totalNum = dataList.reduce((prev, curr) => prev + curr);
  var seriesList = [];
  var valList = [];
  dataList.forEach(function (item, index) {
    var obj = {
      value: Math.floor(((item / totalNum * 10000) / 10000) * 100),
      value2: item
    };
    if (index == dataList.length - 1) {
      var total = valList.reduce((prev, curr) => prev + curr);
      obj.value = Number((100 - total).toFixed(2));
      valList.push(obj.value);
    } else {
      valList.push(obj.value);
    }
    seriesList.push({
      name: nameList[index],
      type: 'bar',
      data: [obj],
      stack: 'one',
      coordinateSystem: 'polar',
      roundCap: true,
      zlevel: 20,
      itemStyle: {
        normal: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
              { offset: 0, color: colorList[index] },
              { offset: 1, color: '#ffffff' }
            ]
          },

        }
      },
      emphasis: {
        itemStyle: {

          shadowBlur: 10,
          shadowColor: "rgba(0, 0, 0, 0.5)",

        }
      }
    });
  });
  var center = ['50%', '36%'];
  var radius1 = ['44%', '70%'];
  var radius2 = ['0%', '38%'];
  var titleX = '48%';
  var titleY = '30%';
  var titleSize = 28;
  var legendBottom = "8%";
  seriesList.push({
    name: '外层背景',
    type: 'pie',
    radius: radius2,
    silent: true,
    center: center,
    itemStyle: {
      normal: {
        opacity: 1,
        color: "#ffffff",
      }
    },
    label: {
      normal: {
        show: false,
      },
    },
    data: [{
      value: 0,
      name: '外层背景'
    }]
  });
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        return params.seriesName + ' <br/> ' + params.marker + params.data.value2 + "人 <br/>  " + params.data.value + "%";
      }
    },
    title: [{
      text: '{num|' + totalNum + '}',
      x: titleX,
      y: titleY,
      textAlign: 'center',
      textStyle: {
        rich: {
          num: {
            fontSize: titleSize,
            fontWeight: 'bold',
            lineHeight: 30,
            color: '#000000'
          },
        }
      },
    }],
    legend: {
      width: "300",
      x: 'center',
      bottom: legendBottom,
      data: lengthList,
      itemHeight: 10,
      itemWidth: 10,
      textStyle: {
        color: "#fff",
        fontSize: 14,
        lineHeight: 14,
      },
      tooltip: {
        show: true,
        formatter: function (params) {
          var name = params.name;
          var i = nameList.indexOf(name);
          var value = dataList[i];
          var color = colorList[i];
          var marker = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span>`;
          return name + ' <br/> ' + marker + value + ' <br/> ' + valList[i] + "%";
        },
      }
    },
    angleAxis: {
      max: 100,
      clockwise: true,
      show: false
    },
    radiusAxis: {
      type: 'category',
      show: true,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false
      },
    },
    polar: {
      center: center,
      radius: radius1,
    },
    series: seriesList
  };
  const chartDom = document.getElementById("userPie");
  if (chartDom) {
    const myChart = echarts.init(chartDom);
    myChart.setOption(option);
    return myChart;
  } else {
        console.error("DOM 元素未渲染: #main");
  }
}
const userLoginPin = () => {
  // 定义一个变量 s1_data，用于存储饼图的数据
  var s1_data = userLoginData.value

// 定义一个变量 colorStops，用于存储颜色渐变的停止点
  var colorStops = [
    [{
      offset: 0,
      color: 'rgba(21, 228, 255, 0.20)' // 0% 处的颜色
    },
      {
        offset: 1,
        color: 'rgba(81, 234, 161, 1)' // 100% 处的颜色
      }
    ],
    [{
      offset: 0,
      color: 'rgba(21, 228, 255, 0.20)' // 0% 处的颜色
    },
      {
        offset: 1,
        color: '#FFFF00' // 100% 处的颜色
      }
    ],
    [{
      offset: 0,
      color: 'rgba(106,105,105,0.07)' // 0% 处的颜色
    },
      {
        offset: 1,
        color: '#CCFF99' // 100% 处的颜色
      }
    ]
  ];

// 定义一个变量 l_data，用于存储图例的数据
  var l_data = [];

// 遍历 s1_data，将每个数据项的 name 属性添加到 l_data 中
  s1_data.forEach((data) => {
    l_data.push(data.name)
  });

// 定义一个变量 option，用于存储图表的配置项
  var option = {
    title: [{ // 圆环中间内容
      text: '100',
      left: "43%",
      top: "43%",
      textStyle: {
        color: "#13E1EB",
        fontSize: 24,
        align: "center"
      },
    }],

    tooltip: {
      trigger: 'item',
      // 靠右显示
      position: ["100%", "50%"],
      formatter: `{b}:{c}`,
    },

    grid: {
      left: "8%",
      top: "10%",
      right: "8%",
      bottom: "22%"
    },
    // 图例
    legend: {
      show: true,
      type: 'scroll',
      icon: 'circle',
      orient: 'horizontal',  // 改为水平布局
      left: 'right',        // 图例下方居中
      top: 'bottom',         // 图例显示在下方
      textStyle: {
        fontSize: 12,
        color: '#fff',
      },
      itemWidth: 14,
      pageIconColor: '#fff', // 图例翻页样式设置
      pageIconSize: 10,
      pageTextStyle: {
        fontSize: 10,
        color: '#fff'
      },
      data: l_data
    },

    series: [{
      name: '总资产',
      type: 'pie',
      center: ['50%', '50%'], // 饼图在画布中的位置
      radius: ['45%', '65%'], // 环形大小
      silent: false, // 是否响应鼠标事件
      data: s1_data,
      avoidLabelOverlap: true, // 防止标签重叠
      showEmptyCircle: true,
      itemStyle: {
        normal: {
          borderType: 'solid',
          borderColor: '#1E3477',
          borderRadius: '80%',
          borderWidth: 2, // 饼图间隔距离
          position: 'inside',
          label: {
            padding: [0, 0],
            show: true,
            //环形数值显示样式格式
            formatter: `{a|{c}人}\n{hr|}\n{a|{d}%}`,
            rich: {
              a: {
                fontSize: 14,
                padding: [3, 0, 5, 0],
                color: '#fff'
              },
              hr: {
                borderColor: '#fff',
                width: '100%',
                borderWidth: 0.8,
                height: 0,
              },
            }
          },
          //环形指向线条
          labelLine: {
            showAbove: true,
            show: true,
            length2: 0,
            lineStyle: {
              color: '#fff',
            }
          },
          //渲染环形渐变色
          color: function(params) {
            return {
              //type: 'linear',
              x: 0,
              y: 1,
              x2: 1,
              y2: 0,
              colorStops: colorStops[params.dataIndex], // 100% 处的颜色
              //globalCoord: false // 缺省为 false
            }
          },

        },

      },

    },
    ]
  }
  const chartDom = document.getElementById("userLoginPie");
  if (chartDom) {
    const myChart = echarts.init(chartDom);
    myChart.setOption(option);
    return myChart;
  } else {
    console.error("DOM 元素未渲染: #main");
  }
}
const userActivePie = () => {
  const chartDom = document.getElementById("userActivePie");
  if (chartDom) {
    const myChart = echarts.init(chartDom);
    const option = {
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: 'horizontal', // 水平布局
        left: 'center',       // 居中
        top: 'bottom',        // 图例显示在下方
        textStyle: {
          color: "#7a869a",
        },
      },
      series: [
        {
          type: "pie",
          radius: ["50%", "70%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: "#ffffff",
            borderWidth: 2,
          },
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "20",
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: userActiveData.value,
          color: ["#78aaf2", "#aed1f7", "#c3dcf8", "#e4f1fc"],
        },
      ],
    };
    myChart.setOption(option)
    return myChart;
  }else {
    console.error("DOM 元素未渲染: #main");
  }
}

onMounted(() => {
  getUserData();
  getUserMapData();
  getUserActiveData()
  getUserStatisticsData();
  getUserLoginStatisticsData();
});
// 获取用户数据统计
const userData = ref({
  admin: {
    totalCount: 0,
    loginCount: 0,
    newCount: 0,
    activeCount: 0
  },
  teacher: {
    totalCount: 0,
    loginCount: 0,
    newCount: 0,
    activeCount: 0
  },
  student: {
    totalCount: 0,
    loginCount: 0,
    newCount: 0,
    activeCount: 0
  }
})
const getUserData = async () => {
  await getUserDataList({type: type.value,startTime: startTime.value,endTime: endTime.value}).then(res=>{
    userData.value = res.data
  })
}
// 获取用户地图数据
const userMapData = ref('')
const getUserMapData = async () => {
  await getUserMapDataList({type: type.value,startTime: startTime.value,endTime: endTime.value}).then(res=>{
    userMapData.value = res.data
    init1();
  });
}
// 用户数据统计
const userStatistics = ref('')
const getUserStatisticsData = async () => {
  await userDataStatistics({type: type.value,startTime: startTime.value,endTime: endTime.value}).then(res=>{
    userStatistics.value = res.data
    userPin();
  })
}
// 用户登录及占比统计
const userLoginData = ref('')
const getUserLoginStatisticsData = async () => {
  await userLoginStatistics({type: type.value,startTime: startTime.value,endTime: endTime.value}).then(res=>{
    userLoginData.value = res.data;
    userLoginPin();
  })
}
// 用户活跃及占比
const userActiveData = ref('')
const getUserActiveData = async () => {
  await userActiveStatistics({type: type.value,startTime: startTime.value,endTime: endTime.value}).then(res=> {
    userActiveData.value = res.data
    userActivePie();
  })
}

</script>

<template>
  <header-template :title="'用户管理可视化'"/>
  <div class="bodyContent" style="margin-top: -55px;color: white">
    <date-component @change="handleClick"/>
    <div style="display: flex;">
      <div class="common statistics">
        <div class="userTitle">
          <span class="text">用户数据统计</span>
        </div>
        <div class="statisticsContent">
          <div class="fangkuai"></div><span class="fangkuaiText">管理员统计</span>
        </div>
        <div style="display: flex;">
          <div style="margin-left: 10px">
            <div class="statisticsBox">
              <img src="@/assets/u12804-DxDSIzMe.png" alt="">
              <img src="@/assets/edksjxc.svg" alt="" style="width: 17px;height: 17px;
      margin-left: -50px;margin-top: -18px">
              <div class="textBox">
                <span>管理员数量</span>
                <div>{{userData.admin.totalCount}}人</div>
              </div>
            </div>
            <div class="statisticsBox">
              <img src="@/assets/u12804-DxDSIzMe.png" alt="">
              <img src="@/assets/edksjxc.svg" alt="" style="width: 17px;height: 17px;
      margin-left: -50px;margin-top: -18px">
              <div class="textBox">
                <span>管理员登录情况</span>
                <div>{{userData.admin.loginCount}}人</div>
              </div>
            </div>
          </div>
          <div style="margin-left: 15px">
            <div class="statisticsBox">
              <img src="@/assets/u12804-DxDSIzMe.png" alt="" style="margin-right: -25px">
              <img src="@/assets/u12811-Bgr-FObf.svg" alt=""
                   style="width: 17px;height: 17px;margin-left: -20px;margin-top: -15px">
              <div class="textBox">
                <span>管理员新增数量</span>
                <div>{{userData.admin.newCount}}人</div>
              </div>
            </div>
            <div class="statisticsBox">
              <img src="@/assets/u12804-DxDSIzMe.png" alt="" style="margin-right: -25px">
              <img src="@/assets/u12811-Bgr-FObf.svg" alt=""
                   style="width: 17px;height: 17px;margin-left: -20px;margin-top: -15px">
              <div class="textBox">
                <span>日活跃管理员</span>
                <div>{{userData.admin.activeCount}}人</div>
              </div>
            </div>
          </div>
        </div>
        <div class="statisticsContent">
          <div class="fangkuai"></div><span class="fangkuaiText">教师统计</span>
        </div>
        <div style="display: flex">
          <div style="margin-left: 10px">
            <div class="statisticsBox">
              <img src="@/assets/u12804-DxDSIzMe.png" alt="">
              <img src="@/assets/edksjxc.svg" alt="" style="width: 17px;height: 17px;
      margin-left: -50px;margin-top: -18px">
              <div class="textBox">
                <span>教师数量</span>
                <div>{{userData.teacher.totalCount}}人</div>
              </div>
            </div>
            <div class="statisticsBox">
              <img src="@/assets/u12804-DxDSIzMe.png" alt="">
              <img src="@/assets/edksjxc.svg" alt="" style="width: 17px;height: 17px;
      margin-left: -50px;margin-top: -18px">
              <div class="textBox">
                <span>教师登录情况</span>
                <div>{{userData.teacher.loginCount}}人</div>
              </div>
            </div>
          </div>
          <div style="margin-left: 25px">
            <div class="statisticsBox">
              <img src="@/assets/u12804-DxDSIzMe.png" alt="" style="margin-right: -25px">
              <img src="@/assets/u12811-Bgr-FObf.svg" alt=""
                   style="width: 17px;height: 17px;margin-left: -20px;margin-top: -15px">
              <div class="textBox">
                <span>教师新增数量</span>
                <div>{{userData.teacher.newCount}}人</div>
              </div>
            </div>
            <div class="statisticsBox">
              <img src="@/assets/u12804-DxDSIzMe.png" alt="" style="margin-right: -25px">
              <img src="@/assets/u12811-Bgr-FObf.svg" alt=""
                   style="width: 17px;height: 17px;margin-left: -20px;margin-top: -15px">
              <div class="textBox">
                <span>日活跃教师</span>
                <div>{{userData.teacher.activeCount}}人</div>
              </div>
            </div>
          </div>
        </div>
        <div class="statisticsContent">
          <div class="fangkuai"></div><span class="fangkuaiText">学生统计</span>
        </div>
        <div style="display: flex">
          <div style="margin-left: 10px">
            <div class="statisticsBox">
              <img src="@/assets/u12804-DxDSIzMe.png" alt="">
              <img src="@/assets/edksjxc.svg" alt="" style="width: 17px;height: 17px;
      margin-left: -50px;margin-top: -18px">
              <div class="textBox">
                <span>学生数量</span>
                <div>{{userData.student.totalCount}}人</div>
              </div>
            </div>
            <div class="statisticsBox">
              <img src="@/assets/u12804-DxDSIzMe.png" alt="">
              <img src="@/assets/edksjxc.svg" alt="" style="width: 17px;height: 17px;
      margin-left: -50px;margin-top: -18px">
              <div class="textBox">
                <span>学生登录情况</span>
                <div>{{userData.student.loginCount}}人</div>
              </div>
            </div>
          </div>
          <div style="margin-left: 25px">
            <div class="statisticsBox">
              <img src="@/assets/u12804-DxDSIzMe.png" alt="" style="margin-right: -25px">
              <img src="@/assets/u12811-Bgr-FObf.svg" alt=""
                   style="width: 17px;height: 17px;margin-left: -20px;margin-top: -15px">
              <div class="textBox">
                <span>学生新增数量</span>
                <div>{{userData.student.newCount}}人</div>
              </div>
            </div>
            <div class="statisticsBox">
              <img src="@/assets/u12804-DxDSIzMe.png" alt="" style="margin-right: -25px">
              <img src="@/assets/u12811-Bgr-FObf.svg" alt=""
                   style="width: 17px;height: 17px;margin-left: -20px;margin-top: -15px">
              <div class="textBox">
                <span>日活跃学生</span>
                <div>{{userData.student.activeCount}}人</div>
              </div>
            </div>
          </div>
        </div>
        <div class="statisticsContent">
          <div class="fangkuai"></div><span class="fangkuaiText">其他潜在统计项</span>
        </div>
        <div style="display: flex">
          <div style="margin-left: 10px">
            <div class="statisticsBox">
              <img src="@/assets/u12804-DxDSIzMe.png" alt="">
              <img src="@/assets/edksjxc.svg" alt="" style="width: 17px;height: 17px;
      margin-left: -50px;margin-top: -18px">
              <div class="textBox">
                <span>用户累计数据</span>
                <div>{{userData.admin.totalCount+userData.teacher.totalCount+
                userData.student.totalCount}}人</div>
              </div>
            </div>
            <div class="statisticsBox">
              <img src="@/assets/u12804-DxDSIzMe.png" alt="">
              <img src="@/assets/edksjxc.svg" alt="" style="width: 17px;height: 17px;
      margin-left: -50px;margin-top: -18px">
              <div class="textBox">
                <span>昨日活跃用户</span>
                <div>{{userData.admin.loginCount+userData.teacher.loginCount+userData.student.loginCount}}人</div>
              </div>
            </div>
          </div>
          <div style="margin-left: 25px">
            <div class="statisticsBox">
              <img src="@/assets/u12804-DxDSIzMe.png" alt="" style="margin-right: -25px">
              <img src="@/assets/u12811-Bgr-FObf.svg" alt=""
                   style="width: 17px;height: 17px;margin-left: -20px;margin-top: -15px">
              <div class="textBox">
                <span>昨日新增</span>
                <div>{{userData.admin.newCount+userData.teacher.newCount+userData.student.newCount}}人</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="common" style="width: 750px;height: 88vh;">
        <div class="userTitle">
          <span class="text">用户数据地图统计</span>
        </div>
        <div id="main" style="width: 750px;height:100%;"></div>
      </div>
      <div class="common" style="width: 355px;height: 88vh;">
        <div class="userTitle">
          <span class="text">用户数据统计</span>
        </div>
        <div class="statisticsContent">
          <div class="fangkuai"></div><span class="fangkuaiText">用户数量及占比</span>
        </div>
        <div id="userPie" style="width: 355px;height: 200px"></div>
        <div class="statisticsContent">
          <div class="fangkuai"></div><span class="fangkuaiText">用户登录及占比</span>
        </div>
        <div id="userLoginPie" style="width: 355px;height: 240px;margin-top: -20px"></div>
        <div class="statisticsContent">
          <div class="fangkuai"></div><span class="fangkuaiText">用户活跃及占比</span>
        </div>
        <div id="userActivePie" style="width: 355px;height: 240px"></div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.bodyContent{
  height: 98%;
  background: url("../visualization/Image/EmergencyCommand.png");
  background-size: cover;
}
.common{
  margin-left: 10px;
  margin-top: 10px;
  border: 1px solid deepskyblue;
  border-radius: 5px;
  box-shadow: 2px 2px 5px whitesmoke;
}
.statistics{
  width: 450px;
  height: 88vh;
}
.userTitle{
  height: 30px;
  margin-left: 10px;
  color: white;
  background: url("../visualization/Image/douwbloe.png");
  background-size: cover;
}
.text{
  margin-left: 20px;
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 18px;
  font-weight: bold;
}
.fangkuai{
  display: flex;
  margin: 10px 0 10px 10px;
  width: 5px;
  height: 20px;
  background: #409eff;
}
.statisticsContent{
  display: flex;
  margin-top: -5px;
}
.fangkuaiText{
  margin-top: 11px;
  font-size: 15px;
  margin-left: 5px;
}
.statisticsBox {
  display: flex;
  align-items: center;
  margin-right: 50px;
}
.statisticsBox img {
  width: 80px;
  height: 80px;
}
.statisticsBox .textBox {
  margin-left: 20px;
}
.textBox span {
  font-size: 13px;
}
.textBox div {
  color: #AEEEEE;
  font-size: 20px;
}


</style>
